// const blobCache = {};
const BlobHelper = {
    blobCache: {},
    // store only one
    contoursCache: { key: '', val: null },
    pathsCache: { key: '', val: null },

    setCache: function(id, blob) {
        this.blobCache[id] = blob;
    },
    getCache: function(id) {
        return this.blobCache[id];
    },
    getAll: function() {
        return this.blobCache;
    },
    setImgCache: function(id, { width = 0, height = 0, dataStr = '', type='image/png' }) { //eslint-disable-line
        // let blob = new Blob([data], { type: type });
        // let DOMURL = window.URL || window.webkitURL || window;
        // let url = DOMURL.createObjectURL(blob);
        let img = new Image();
        // img.src = url;
        img.setAttribute('src', dataStr);
        img.onload = () => {
            let canvasCache, ctx;
            canvasCache = document.createElement('canvas');
            canvasCache.setAttribute('width', img.width);
            canvasCache.setAttribute('height', img.height);
            ctx = canvasCache.getContext('2d');
            ctx.save();
            ctx.drawImage(img, 0, 0, img.width, img.height);
            ctx.restore();
            this.setCache('imgCache_' + id, canvasCache);
            // this.setCache(id, img);
        };
    },
    getImgCache: function(id) {
        return this.getCache('imgCache_' + id);
    },
    // setImgCacheBySvg: function(id, { width = 0, height = 0, svg = '', type = 'image/svg+xml;charset=utf-8' }) {
    setImgCacheBySvg: function(id, { width = 0, height = 0, svg = '', type = 'image/svg+xml' }) {
        // width = width / 10;
        // height = height / 10;
        let blob = new Blob([svg], { type: type });
        let DOMURL = window.URL || window.webkitURL || window;
        let url = DOMURL.createObjectURL(blob);
        let img = new Image();
        img.src = url;
        img.width = width;
        img.height = height;
        // window.document.body.appendChild(img);
        // console.log('[v-blob] setImgCacheBySvg: 21 ', id, img, width, height);
        // let timer = null;
        let fn = () => {
            // if (timer) clearTimeout(timer);
            // console.log('[v-blob] setImgCacheBySvg: ', id, img);
            let canvasCache, contextCache;
            canvasCache = document.createElement('canvas');
            canvasCache.setAttribute('width', width);
            canvasCache.setAttribute('height', height);
            contextCache = canvasCache.getContext('2d');
            contextCache.save();
            contextCache.drawImage(img, 0, 0, width, height);
            contextCache.restore();
            this.setCache('imgCacheBySvg_' + id, canvasCache);
        };
        img.onload = () => fn();
        img.onerror = e => {
            console.error(e);
            // setTimeout(fn, 200);
            // fn();
        };
        // timer = setTimeout(() => fn(), 200);
        // fn();
    },
    getImgCacheBySvg: function(id) {
        // console.log('[v-blob] getImgChcheBySvg: ', id, this.blobCache['imgCacheBySvg_SIMB']);
        return this.getCache('imgCacheBySvg_' + id);
    },
    setPathCacheBySvgPath: function(id, path) {
        const pathElement = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        pathElement.setAttributeNS(null, 'd', path);
        this.setCache('pathCacheBySvgPath_' + id, pathElement);
        return pathElement;
    },
    getPathCacheBySvgPath: function(id) {
        return this.getCache('pathCacheBySvgPath_' + id);
    },
    setCanvasCache: function(id, canvas) {
        this.setCache('canvas_' + id, canvas);
    },
    getCanvasCache: function(id) {
        return this.getCache('canvas_' + id);
    },
    // Cache for Offscreen Render. 
    setContoursCache: function(key, canvas) {
        if (this.contoursCache.key !== key) {
            this.contoursCache.key = key;
            this.contoursCache.val = canvas;
        }
        return this.contoursCache.val;
    },
    getContoursCache: function(key) {
        if (this.contoursCache.key === key) return this.contoursCache.val;
        return null;
    },
    setPathsCache: function(key, canvas) {
        if (this.pathsCache.key !== key) {
            this.pathsCache.key = key;
            this.pathsCache.val = canvas;
        }
        return this.pathsCache.val;
    },
    getPathsCache: function(key) {
        if (this.pathsCache.key === key) return this.pathsCache.val;
        return null;
    }
};

export default BlobHelper;
